<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/LoginJsp/layui/css/layui.css">
    <script src="/LoginJsp/js/jquery.min.js"></script>
    <script src="/LoginJsp/js/jquery-ui.min.js"></script>
    <script src="/LoginJsp/js/stopExecutionOnTimeout.js"></script>
    <script src="/LoginJsp/layui/layui.js"></script>
    <script src="/LoginJsp/js/Particleground.js"></script>
    <script src="/LoginJsp/js/Treatment.js"></script>
    <script src="/LoginJsp/js/jquery.mockjax.js"></script>
    <link rel="stylesheet" href="/LoginJsp/css/styles.css">
    <link rel="stylesheet" href="/LoginJsp/css/demo.css">
    <link rel="stylesheet" href="/LoginJsp/css/loaders.css">
</head>
<body>
<!-- 登录页面 -->
<canvas width="383" height="747" class="pg-canvas"></canvas>
<form id="tableFrom" method="post">
    <div class="login">
        <div class="login_title">
            <span>登录页面</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" style="width:100px;height:30px;color:blue;border-color:blue">
        </div>

        <div class="login_fields">
            <div class="login_fields__user">
                <div class="icon">
                </div>
                <input  name="userAccout" type="text" maxlength="16" placeholder="账号"  autocomplete="off">
                <div class="validation">
                </div>
            </div>
            <div class="login_fields__password">
                <div class="icon">
                </div>
                <input name="userPwd" type="text" maxlength="16" placeholder="密码" autocomplete="off">
                <div class="validation">
                </div>
            </div>
            <div class="login_fields__password">
                <div class="icon">
                </div>
                <input name="code" type="text" maxlength="4" placeholder="验证码" autocomplete="off">
                <div class="validation" style="opacity: 1; right: -5px;top: -3px;">
                    <canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
                </div>
            </div>
            <div class="login_fields__submit">
                <input type="button"  value="登录"><input type="button" value="注册">
            </div>
        </div>
        <div class="success">
        </div>
        <div class="disclaimer">
            <p>欢迎来到热浪微博  更多网站模板：<a href="http://www.sucaihuo.com/" target="_blank">素材火</a></p>
        </div>
    </div>
</form>
</body>


</body>
<script type="text/javascript">
    //跳转去登录页面
    function toPage(){
        layer.msg('准备去手机注册页面');
        window.location.href="/login/toView?viewName=";

    }
    //登录
    function dologin(){
        $.ajax({
            url:"/login/tologin",
            type:"POST",
            data:$("#tableFrom").serialize(),
            success:function(pageUtil){
                if(pageUtil==1){
                    layer.msg('登录成功');
                    goTo();
                }else{
                    ErroAlert('登录失败,密码或者账号不正确');
                    location.href.reload();
                }
            },
            error:function(){
                ErroAlert('失败了');
            }
        });
    }
    function goTo(){
        layer.msg('准备去展示页面');
        window.location.href='/login/toView?viewName=home';
    }
    //生成验证码！！！
    var canGetCookie = 0;//是否支持存储Cookie 0 不支持 1 支持
    var CodeVal = 0;
    Code();
    function Code() {
        if(canGetCookie == 1){
            createCode("AdminCode");
            var AdminCode = getCookieValue("AdminCode");
            showCheck(AdminCode);
        }else{
            showCheck(createCode(""));
        }
    }
    function showCheck(a) {
        CodeVal = a;
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.clearRect(0, 0, 1000, 1000);
        ctx.font = "80px 'Hiragino Sans GB'";
        ctx.fillStyle = "#E8DFE8";
        ctx.fillText(a, 0, 100);
    }
    //粒子背景特效
    $('body').particleground({
        dotColor: '#E8DFE8',
        lineColor: '#133b88'
    });
    $('input[name="userPwd"]').focus(function () {
        $(this).attr('type', 'password');
    });
    $('input[type="text"]').focus(function () {
        $(this).prev().animate({ 'opacity': '1' }, 200);
    });
    $('input[type="text"],input[type="password"]').blur(function () {
        $(this).prev().animate({ 'opacity': '.5' }, 200);
    });
    $('input[name="userAccout"],input[name="userPwd"]').keyup(function () {
        var Len = $(this).val().length;
        if (!$(this).val() == '' && Len >= 5) {
            $(this).next().animate({
                'opacity': '1',
                'right': '30'
            }, 200);
        } else {
            $(this).next().animate({
                'opacity': '0',
                'right': '20'
            }, 200);
        }
    });
    var open = 0;
    layui.use('layer', function () {
        /* //var msgalert = '默认账号:' + truelogin + '<br/> 默认密码:' + truepwd;
        //var index = layer.alert(msgalert, { icon: 6, time: 4000, offset: 't', closeBtn: 0, title: '友情提示', btn: [], anim: 2, shade: 0 });
        layer.style(index, {
            color: '#777' */
    });
    $('input[type="button"]').click(function () {
        var login = $('input[name="userAccout"]').val();
        var pwd = $('input[name="userPwd"]').val();
        var code = $('input[name="code"]').val();
        var JsonData = {code: code};
        if (login == '') {
            ErroAlert('请输入您的账号');
        } else if (pwd == '') {
            ErroAlert('请输入密码');
        } else if (code == '' || code.length != 4) {
            ErroAlert('输入验证码');
        }else if(JsonData.code.toUpperCase() == CodeVal.toUpperCase()){
            dologin();
        }else{
            ErroAlert('验证码输入错误');
        }
    })
</script>
</html>